<template>
	<!-- tabbar/我的页面 -->
  <view class="">
    <login-btn ref="loginBtn" @loginAfter="getUsernfo" />
    <view class="photo">
		<!-- 头像和登录部分 -->
      <view class="personInfor">
        <image
          v-if="infor.headimgurl"
          class="imgs"
          :src="infor.headimgurl"
          mode=""
        ></image>
        <image
          v-else
          class="imgs"
          src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/nv.png"
          mode=""
        ></image>
        <view class="cont" @click="login">
          <view class="tit"> {{ infor.nickname ? infor.nickname : "" }} </view>
          <view v-if="infor.mbNo" class="ids"> ID：{{ infor.mbNo ? infor.mbNo : "" }} </view>
          <view class="ids" v-else>暂未登录</view>
        </view>
      </view>

      <!-- 我的/收藏和历史。。。 -->  
      <view class="list1">
        <u-grid :border="false" :col="4">
          <u-grid-item
            @click="topGo(itemInner.id)"
            :key="index1"
            v-for="(itemInner, index1) in ItemList"
          >
            <view class="myicons">
              <image
                class="icons1"
                :src="itemInner.icon"
                mode="widthFix"
              ></image>
            </view>
            <view class="grid-text">{{ itemInner.name }}</view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>

    <!-- 我的/我的找活。。。 -->
    <view
      @click="goNext(item)"
      :key="index"
      v-for="(item, index) in list"
      class="sameLi"
    >
      <view v-if="item.id == 5" class="sameli_Wrap">
        <button class="li dif" open-type="contact">
          <view class="left">
            <image class="img" :src="item.icon" mode="widthFix"></image>
			<!-- 在线客服 -->
            <text>{{ item.name }}</text>
          </view>

          <u-icon color="#dcdcdc" name="arrow-right"></u-icon>
        </button>
      </view>

      <view
        v-else
        :class="{ mar_bot: index == 3 || index == 6 }"
        class="sameli_Wrap"
      >
        <view class="li">
          <view class="left">
            <image class="img" :src="item.icon" mode="widthFix"></image>
            {{ item.name }}
          </view>
        </view>
        <u-icon color="#dcdcdc" name="arrow-right"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import LoginBtn from "@/components/login.vue";
export default {
  components: {
    LoginBtn,
  },
  onLoad() {
    this.getUsernfo();
      uni.removeStorageSync('city')
      uni.removeStorageSync('city1')
  },

  data() {
    return {
      scrollTop: 0,
      infor: {},
      ItemList: [
        {
          id: 3,
          name: "收藏与历史",
          icon: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/shoucang.png",
        },
        {
          id: 1,
          name: "我的发布",
          icon: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/wodefabu.png",
        },
        {
          id: 2,
          name: "报名记录",
          icon: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/baoming.png",
        },
        {
          id: 4,
          name: "劳动维权",
          icon: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/weiquan.png",
        },

        // ,{
        // 	id: 4,
        // 	name: '浏览记录',
        // 	icon: 'https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/nv.png'
        // }
      ],
      img: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/3.jpg",
      list: [
        {
          name: "我的找活",
          id: 0,
          icon: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/daili.png",
        },
        {
          name: "消息中心",
          id: 8,
          icon: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/wodexiaoxi.png",
        },

        // {
        //   name: "实名认证",
        //   id: 1,
        //   icon: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/shiming.png",
        // },
        // {
        //   name: "代理中心",
        //   id: 2,
        //   icon: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/daili.png",
        // },
        {
          name: "企业认证",
          id: 3,
          icon: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/qiyerenzheng.png",
        },
        {
          name: "在线客服",
          id: 5,
          icon: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/kefu.png",
        },
        // {
        // 	name: '分享推荐',
        // 	id: 4
        // },

        {
          name: "帮助中心",
          id: 6,
          icon: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/bangzhu.png",
        },
        {
          name: "设置中心",
          id: 7,
          icon: "https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/my/shezhi.png",
        },

      ],
    };
  },
  methods: {
    login(){
      if (!this.infor.nickname){
        uni.navigateTo({
          url: '/package/pages/components/auth',
        });
      }

    },
    getUsernfo() {
      this.infor = uni.getStorageSync("member");
      console.log(uni.getStorageSync("member"));
    },
    topGo(id) {
      // if (!uni.getStorageSync("token")) {
      //   uni.navigateTo({
      //     url: "/package/pages/components/auth",
      //   });

      //   return false;
      // }

      if (id == 1) {
        uni.navigateTo({
          url: "/package/pages/my/recruitment/recruitment",
        });
      } else if (id == 2) {
        uni.navigateTo({
          url: "/package/pages/my/findJob/findJob",
        });
      } else if (id == 3) {
        uni.navigateTo({
          url: "/package/pages/my/collection/collection",
        });
      } else if (id == 4) {
        uni.navigateTo({
          url: "/package/pages/my/safeguard/safeguard",
        });
      }
    },
    goNext(e) {
      if (!uni.getStorageSync("token")) {
        uni.navigateTo({
          url: "/package/pages/components/auth",
        });

        return false;
      }
      console.log(e);
      if (e.id == 0) {
        uni.navigateTo({
          url: "/package/pages/my/searchJob/searchJob",
        });
      } else if (e.id == 1) {
        uni.navigateTo({
          url: "/package/pages/my/certification/certification",
        });
      } else if (e.id == 2) {
        uni.navigateTo({
          url: "/package/pages/my/agencyCenter/agencyCenter",
        });
      } else if (e.id == 3) {
        uni.navigateTo({
          url: "/package/pages/my/enterpriseCertification/enterpriseCertification",
        });
      } else if (e.id == 4) {
        uni.navigateTo({
          url: "/package/pages/my/share/share",
        });
      }
      // else if (e.id == 5) {
      // 	uni.navigateTo({
      // 		url: './onlineService/onlineService'
      // 	})
      // }
      else if (e.id == 6) {
        uni.navigateTo({
			// 我的/帮助中心
          url: `/package/pages/webView/webView?name=帮助中心&url=https://web.xujiekeji.com/download/help.html`,
        });
      } else if (e.id == 7) {
        uni.navigateTo({
			// 我的/设置中心
          url: "/package/pages/my/setting/setting",
        });
      } else if (e.id == 11) {
        uni.navigateTo({
          url: "/package/pages/my/qrcode/qrcode",
        });
      }
    },
  },
};
</script>
<style>
@import url("/static/fonts/iconfont.css");

page {
  background: rgb(245, 247, 249);
}
</style>
<style lang="scss" scoped>
.photo {
  background: #ffffff;
  margin-bottom: 7px;
  padding: 20rpx 28rpx 31rpx;

  .personInfor {
    display: flex;
    align-items: center;

    .imgs {
      width: 120rpx;
      height: 120rpx;
      margin-right: 31rpx;
      border-radius: 50%;
    }

    .cont {
      .tit {
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #1a1a1a;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
      }

      .ids {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #808080;
      }
    }
  }
}

.list1 {
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  padding: 8rpx 0;
  background: #ffffff;
  margin: 31rpx 0 0;
  border-radius: 15rpx;
  overflow: hidden;

  .fonts {
    color: #fff;
  }

  .myicons {
    .icons1 {
      width: 60rpx;
      height: 60rpx;
    }
  }

  .grid-text {
    font-size: 24rpx;
    margin-top: 6rpx;
    color: #999999;
  }
}

.sameLi {
  background: #ffffff;

  .sameli_Wrap {
    &.mar_bot {
      margin-top: 7px;
    }

    border-bottom: 1px solid #f5f5f5;
    padding: 0 28rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    /deep/ button:after {
      border: none;
    }

    .li {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      width: 100%;
      height: 50px;
      &.dif {
        padding: 0;
        justify-content: space-between;
        background: none;
      }
      .left {
        display: flex;
        align-items: center;
      }

      .img {
        height: 50rpx;
        width: 50rpx;
        display: block;
        margin-right: 26rpx;
      }
    }
  }
}
</style>
